<!doctype html>
<html lang="zh-CN">
	<head>
		<!-- 必须的 meta 标签 -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
		<!-- Bootstrap 的 CSS 文件 -->
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

		<title>用户列表</title>
		<style type="text/css">
			.loginPannel {
				width: 800px;
				margin: 30px auto;
			}

			.loginPannel h3 {
				text-align: center;
			}
			a{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="loginPannel" id="app">
			<h3>用户列表</h3> 
			<table class="table"> 
			  <thead>
			    <tr>
			      <th>id</th>
			      <th>用户名</th> 
			      <th>性别</th>
				  <th>生日</th>
				  <th>创建时间</th>
				  <th>更新时间</th>
				  <th style="width:200px">操作</th> 
			    </tr>
			  </thead>
			  <tbody id="list"> 
			  </tbody>
			</table>
			<div class="page">
			        <ul class="pagination"></ul>
			    </div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
		  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-qtoqgtVysUOibC/YeVgpOyLJpelAT1DHvg98mYHqq8ofXEmNEjaNqOZwnMKxlXCy" crossorigin="anonymous"></script>
		 -->
		 <script src="lib/bootstrap-paginator.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
		<script type="text/javascript">
			function gotoPage(args){
				console.log(args);
				location.href="./userForm.html?id="+args;
			} 
			function delItem(args){
				$.ajax({
					headers: {'token': localStorage.getItem('token')},
					url: '/api/user/'+args,
					 type: 'delete',
					 dataType: 'json',
					success: function(res, status) { 
						console.log(res);
						if(res.code==200){
							  getUser({current:1,size:10});
						} 
					}
				}); 
			}
			function page(currentPage,totalPage,callback){
				$(".pagination").bootstrapPaginator({
				           //设置版本号
				           bootstrapMajorVersion: 3,
				           // 显示第几页
				           currentPage: currentPage,
				           // 总页数
				           totalPages:totalPage,
				           //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
				           onPageClicked: function (event,originalEvent,type,page) {
				               // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面 
				              callback(event,originalEvent,type,page);
				           }
				       })
			}
			
			  function getUser(param) {
				// console.log("获取token",localStorage.getItem('token'));
				$.ajax({ 
					headers: { 'token': localStorage.getItem('token')},
					url: '/api/user',
					type: 'get',
					data:{...param},
					dataType: 'json', 
					success: function(res, status) { 
						console.log(res);
						if(res.code==200){
							let HTML="";
							res.data.list.forEach(item=>{ 
								HTML+=`
									<tr>
									  <th>${item.id}</th>
									  <th>${item.name}</th>
									  <td>${item.gender}</td>
									  <td>${item.birth}</td>
									  <td>${item.createdAt}</td>
									  <td>${item.updatedAt}</td>
									  <td><a onclick="gotoPage(${item.id})">编辑</a>&nbsp;&nbsp;<a onclick="delItem(${item.id})">删除</a></td>
									</tr> 
								`
							}) 
							document.getElementById("list").innerHTML=HTML;
						}
						page(res.data.current,res.data.totalPage,(e,orgE,type,page)=>{ 
							  getUser({current:page,size:10});
						});
					}
				});
			   }
			   getUser({current:1,size:10});
			   
			var app2 = new Vue({
				el: '#app',
				data: {
					list:[],
				},
				mounted() {
					// this.getUser();
				},
				methods: {
					initPage(){
						$(".pagination").bootstrapPaginator({
						           //设置版本号
						           bootstrapMajorVersion: 3,
						           // 显示第几页
						           currentPage: currentPage,
						           // 总页数
						           totalPages:totalPage,
						           //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
						           onPageClicked: function (event,originalEvent,type,page) {
						               // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面 
						              callback(event,originalEvent,type,page);
						           }
						       })
					},
					getUser() {
						console.log("获取token",localStorage.getItem('token'));
						$.ajax({ 
							headers: { 'token': localStorage.getItem('token')},
							url: '/api/user',
							type: 'get',
							dataType: 'json',
							data: this.form,
							success: function(res, status) {
								this.list=res.data.list
							}
						});
					}
				}
			})
		</script>
	</body>
</html>
